<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>京东左侧菜单</title>
    <style>
        body{
background-color: #333;
        }
        /*
        去除默认样式
         */
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            list-style: none;
        }

        /*设置外层容器的样式*/
        .menu{
            box-sizing: border-box;
            width: 190px;
            height: 470px;
            background-color: #fff;
margin: 100px auto;
            padding: 10px 0;
        }

        .menu > li{
            height: 25px;
            line-height: 25px;
            padding-left: 18px;
        }

        .menu > li:hover{
            background-color: rgb(217,217,217);
        }

        .menu a{
            text-decoration: none;
            font-size: 14px;
            color: #333;
        }

        .menu a:hover{
            color: rgb(200,22,35);
        }

        .menu .line{
            font-size: 12px;
            color: rgb(63,63,63);
            margin: 0 2px;
        }
    </style>
</head>
<body>
<!--外层容器-->
<ul class="menu">
    <!--    菜单项-->
    <li>
        <a href="#">家用电器</a>
    </li>
    <li>
        <a href="#">手机</a><span class="line">/</span><a href="#">运营商</a><span class="line">/</span><a href="#">数码</a>
    </li>
    <li>
        <a href="#">电脑</a><span class="line">/</span><a href="#">办公</a>
    </li>
    <li>
        <a href="#">家居</a><span class="line">/</span><a href="#">家具</a><span class="line">/</span><a href="#">家装</a><span class="line">/</span><a href="#">厨具</a>
    </li>
    <li>
        <a href="#">男装</a><span class="line">/</span><a href="#">女装</a><span class="line">/</span><a href="#">内衣</a><span class="line">/</span><a href="#">童装</a>
    </li>
    <li>
        <a href="#">美妆</a><span class="line">/</span><a href="#">个护清洁</a><span class="line">/</span><a href="#">宠物</a>
    </li>
    <li>
        <a href="#">女鞋</a><span class="line">/</span><a href="#">箱包</a><span class="line">/</span><a href="#">珠宝</a><span class="line">/</span><a href="#">钟表</a>
    </li>
    <li>
        <a href="#">男鞋</a><span class="line">/</span><a href="#">运动</a><span class="line">/</span><a href="#">户外</a>
    </li>
    <li>
        <a href="#">房产</a><span class="line">/</span><a href="#">汽车</a><span class="line">/</span><a href="#">汽车用品</a>
    </li>
    <li>
        <a href="#">母婴</a><span class="line">/</span><a href="#">玩具乐器</a>
    </li>
    <li>
        <a href="#">食品</a><span class="line">/</span><a href="#">酒类</a><span class="line">/</span><a href="#">生鲜</a><span class="line">/</span><a href="#">特产</a>
    </li>
    <li>
        <a href="#">艺术</a><span class="line">/</span><a href="#">礼品鲜花</a><span class="line">/</span><a href="#">农资绿植</a>
    </li>
    <li>
        <a href="#">医药保健</a><span class="line">/</span><a href="#">计生情趣</a>
    </li>
    <li>
        <a href="#">图书</a><span class="line">/</span><a href="#">文娱</a><span class="line">/</span><a href="#">教育</a><span class="line">/</span><a href="#">电子书</a>
    </li>
    <li>
        <a href="#">机票</a><span class="line">/</span><a href="#">酒店</a><span class="line">/</span><a href="#">旅游</a><span class="line">/</span><a href="#">生活</a>
    </li>
    <li>
        <a href="#">众筹</a><span class="line">/</span><a href="#">白条</a><span class="line">/</span><a href="#">保险</a><span class="line">/</span><a href="#">企业金融</a>
    </li>
    <li>
        <a href="#">安装</a><span class="line">/</span><a href="#">维修</a><span class="line">/</span><a href="#">清洗</a><span class="line">/</span><a href="#">二手</a>
    </li>
    <li>
        <a href="#">工业品</a>
    </li>
</ul>
</body>
</html>